<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="assets/images/favicon.png" type="image/png">
    <title>用户中心</title>

    <!--Begin  Page Level  CSS -->
    <link href="assets/plugins/jquery-ui/jquery-ui.min.css" rel="stylesheet"/>
    <!--End  Page Level  CSS -->
    <link href="assets/css/icons.css" rel="stylesheet">
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/apiStyle.css" rel="stylesheet">
    <link href="assets/css/responsive.css" rel="stylesheet">


</head>

<body class="sticky-header">
<div id="app">

    <!--Start left side Menu-->
    <div id="nav-api" class="left-side sticky-left-side" style="background-color: #B11E22">
    </div>
    <!--<script src="assets/js/commonPage/nav-api.js"></script>-->
    <!--End left side menu-->


    <!-- main content start-->
    <div class="main-content">

        <!-- header section start-->
        <!--<script src="assets/js/commonPage/header.js"></script>-->
        <div class="header-section">

            <a class='toggle-btn'><i class='fa fa-bars'></i></a>

            <!--notification menu start -->
            <div class='menu-right'>
                <ul class='notification-menu'>
                    <li>
                        <a href='#' class='btn btn-default dropdown-toggle info-number' data-toggle='dropdown'>
                            <i class='fa fa-history'></i>
                            <!--<span class='badge'>6</span>-->
                        </a>
                        <div class='dropdown-menu dropdown-menu-head pull-right'>
                            <h5 class='title'>只显示最多5条记录</h5>
                            <ul class='dropdown-list'>
                                <li class='notification-scroll-list notification-list '>
                                    <!-- list item-->
                                    <a href='' class='list-group-item' v-for="(item,index) in history.slice(0,5)">
                                        <div class='media'>
                                            <div class='pull-left p-r-10'>
                                                <em class='fa fa-shopping-cart noti-primary'></em>
                                            </div>
                                            <div class='media-body'>
                                                <h5 class='media-heading'>{{item.name}}</h5>
                                                <p class='m-0'>
                                                    <small>{{item.timeDiff}}</small>
                                                </p>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li class='last'><a href='history.html'>查看所有足迹</a></li>
                            </ul>
                        </div>
                    </li>

                    <!--<li>
                        <a href='#' class='btn btn-default dropdown-toggle info-number' data-toggle='dropdown'>
                            <i class='fa fa-bell-o'></i>
                            <span class='badge'>6</span>
                        </a>
                        <div class='dropdown-menu dropdown-menu-head pull-right'>
                            <h5 class='title'>Notifications</h5>
                            <ul class='dropdown-list normal-list'>
                                <li class='message-list message-scroll-list'>
                                    <a href='#'>
                                    <span class='photo'> <img src='assets/images/avatar/name'
                                                              class='img-circle' alt='img'></span>
                                        <span class='subject'>石头记</span>
                                        <span class='message'> New tasks needs to be done</span>
                                        <span class='time'>15 minutes ago</span>
                                    </a>
                                </li>
                                <li class='last'><a href='#'>All Messages</a></li>
                            </ul>
                        </div>
                    </li>-->
                    <li>
                        <a href='#' class='btn btn-default dropdown-toggle' data-toggle='dropdown'>
                            <img src='assets/images/avatar/1610176679728.jpg' alt=''/>
                            {{user.userName}}
                            <span class='caret'></span>
                        </a>
                        <ul class='dropdown-menu dropdown-menu-usermenu pull-right'>
                            <!--<li><a href='#'> <i class='fa fa-wrench'></i> uff </a></li>-->
                            <li><a href='user.html'> <i class='fa fa-user'></i> 个人中心 </a></li>
                            <li><a href='history.html'> <i class='fa fa-info'></i> 我的足迹 </a></li>
                            <li><a href='order.html'> <i class='fa fa-info'></i> 我的订单 </a></li>
                            <li><a href='#' @click="loginout"><i class='fa fa-lock'></i> 退出登录 </a></li>
                        </ul>
                    </li>

                </ul>
            </div>
            <!--notification menu end -->

        </div>
        <!-- header section end-->


        <!--body wrapper start-->
        <div class="wrapper" id="wrapper" style="background-color: white">
            <div class="container">
                <div class="row" style="margin-top: 10px">
                    <div class="col-lg-12" style="background-color: #F5F8FA;margin-top: 10px">
                        <h4><a href="user.html">{{user.userName}}</a>,欢迎回来</h4>
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="#">我的收货地址</a></li>
                                <li class="breadcrumb-item"><a href="#">我的足迹</a></li>
                                <li class="breadcrumb-item "><a href="/view_api/index.html">首页</a></li>
                            </ol>
                        </nav>
                    </div>
                    <div class="col-lg-12" style="background-color: white"></div>
                </div>
            </div>


            <div class="container ">
                <div class="row  btn-group btn-group-lg" role="group" aria-label="Basic example">
                    <button @click="orderShow(0)" style="width: 225px;border-style: solid;border-width: 2px;
                    border-color: darkgrey" type="button" class="btn btn-secondary">
                        未支付
                    </button>
                    <button @click="orderShow(1)"
                            style="width: 225px;border-style: solid;border-width: 2px;border-color: darkgrey"
                            type="button" class="btn btn-secondary">已支付
                    </button>
                    <button @click="orderShow(2)"
                            style="width: 225px;border-style: solid;border-width: 2px;border-color: darkgrey"
                            type="button" class="btn btn-secondary">待收货
                    </button>
                    <button @click="orderShow(3)"
                            style="width: 225px;border-style: solid;border-width: 2px;border-color: darkgrey"
                            type="button" class="btn btn-secondary">待评价
                    </button>
                    <button @click="orderShow(5)"
                            style="width: 225px;border-style: solid;border-width: 2px;border-color: darkgrey"
                            type="button" class="btn btn-secondary">已完成
                    </button>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <h2 style="border-style: solid"></h2>
                    <table class="col-md-12">
                        <thead>
                        <tr style="font-size: 20px">
                            <th></th>
                            <th>商品名称</th>
                            <th>尺寸</th>
                            <th>商品价格</th>
                            <th>数量</th>
                            <th>总价</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="order in orderList" style="margin-top: 20px">
                            <!--第一条输出-->
                            <!--<td>
                                <button type="button" @click="allSelect(orderList[index].goods.sellerId)"
                                        class="btn btn-outline-info">
                                    全选该店铺
                                </button>
                                <button type="button" @click="allCancel(orderList[index].goods.sellerId)"
                                        class="btn-danger">
                                    取消全选
                                </button>
                                <br>
                                <input class="box" type="checkbox" :value="shopCart.goodsId"
                                       :name="shopCartList[index].goods.sellerId">
                            </td>-->
                            <td>
                                订单号：{{order.parentsOrderId}}
                                <img :src="order.goods.headUrl" alt="13" style="width: 150px;height:150px;">
                            </td>
                            <td><a :href="'/view_api/shop-detail.html?id='+order.goodsId">{{order.goods.name}}</a></td>
                            <td>{{order.goods.size}}<br/></td>
                            <td>
                                <strong>${{order.originalPrice}}.00</strong><br>
                            </td>
                            <!--<td><input class="num" :id="shopCart.goodsId" type="number" name="quantity" min="1"
                                       max="500"
                                       v-model="shopCart.goodsNum" @click="getValue"></td>
                            <div style="display: none"></div>-->
                            <td>
                                <strong>{{order.goodsNumber}}</strong><br>
                            </td>
                            <td>
                                <strong>${{order.sonOrderAmout}}.00</strong><br>
                            </td>
                            <td>
                                <span class="red" v-if="status===0">
                                    <button @click="toPay(order.parentsOrderId)">
                                        <i aria-hidden="true">支付</i>
                                    </button>
                                </span>
                                <span class="red" v-else-if="status===2">
                                    <button @click="update(4,order.parentsOrderId)">
                                        <i aria-hidden="true">确认收货</i>
                                    </button>
                                </span>
                                <span class="red" v-if="status===3">
                                    <button

                                            class="btn btn-primary btn-lg"
                                            data-toggle="modal"
                                            data-target="#myModal">
                                        <i aria-hidden="true">评价</i>
                                    </button>
                                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
                                         aria-labelledby="myModalLabel" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal"
                                                        aria-hidden="true">&times;
                                                </button>
                                                <h4 class="modal-title" id="myModalLabel">评价</h4>
                                                <form>
                                                    <div class="form-group">
                                                        <label for="speak">请输入</label>
                                                        <input type="text" class="form-control" id="speak"
                                                               placeholder="亲，欢迎下次光临">
                                                    </div>
                                                    <button type="button" class="btn btn-default" data-dismiss="modal">
                                                        关闭
                                                    </button>
                                                    <button type="submit" class="btn btn-primary"
                                                            @click="comments(order.parentsOrderId)">提交评论
                                                    </button>
                                                </form>
                                            </div>
                                        </div><!-- /.modal-content -->
                                    </div><!-- /.modal -->
                                </div>
                                </span>
                                <span class="red" v-else-if="status===5">
                                    <button class="btn btn-primary" @click="showComment" :test="order.comments">
                                        查看评论
                                    </button>
                                </span>
                            </td>
                        </tr>
                        </tr>
                        </tbody>
                    </table>
                </div>

            </div>

            <!--<div class="container">
                <div class="row" style="margin-top: 10px">
                    <div style="background-color: #A0CDEB;height: 40px"><h3 style="color: #ffffff">根据浏览，猜我喜欢</h3></div>
                    <div style="background-color: #F5F8FA">
                        <div style="float: left;margin-right: 5px;" v-for="(item,index) in history.slice(0,6)">
                            <div class=" card border-secondary mb-3" style="width: 18rem;background-color: white">
                                <a :href='"../view_api/shop-detail.html?id="+item.id'>
                                    <img :src="item.headUrl" style="height: 180px;width: 180px" class="card-img-top">
                                </a>
                                <div class="card-body">
                                    <h5 class="card-title">{{item.name}}</h5>
                                    <p class="card-text">{{item.summary}}</p>
                                    <p class="card-text">{{item.timeDiff}}浏览</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>-->
        </div>
        <!-- End Wrapper-->


        <!--Start  Footer -->
        <footer id="apiFooter" class="footer-main"></footer>
        <!--End footer -->


    </div>
    <!--End main content -->

</div>
<!--Begin core plugin -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/plugins/moment/moment.js"></script>
<script src="assets/js/jquery.slimscroll.js "></script>
<script src="assets/js/jquery.nicescroll.js"></script>
<script src="assets/js/functions.js"></script>
<!-- End core plugin -->
<!--  vue  -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="assets/js/util/http-util.js"></script>
</body>
<script>
    $(function () {
        // $('#header').load('header.html');
        $('#apiFooter').load('apiFooter.html');
        $('#nav-api').load('nav-api.html');
    })
</script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            history: [],
            user: [],
            orderList: [],
            status: '',
        },
        computer: {},
        methods: {
            orderShow: function (status) {
                let url = "/shop_api/showOrder";
                if (status == null) {
                    status = 0;
                }
                this.status = status;
                let params = {status: status};
                let thisObj = this;
                doPost(url, params, function (resp) {
                    thisObj.orderList = resp;
                    console.log(thisObj.orderList);
                })
            },
            getUser: function () {
                let thisObj = this;
                let url = "/shop_api/getUser";
                doGet(url, function (resp) {
                    thisObj.user = resp;
                })
            },
            loginout: function () {
                let url = "/shop_api/loginpassout";
                doGet(url, function () {
                    location.href = "../view_api/loginpass.html";
                    alert("退出登录成功");
                });
            },
            toPay: function (id) {
                console.log("父订单: " + id)
                let url = "http://localhost:8080/shop_api/to_pay";
                let parm = {id: id};
                $.ajax({
                    url: url,
                    type: 'post',
                    data: parm,
                    success: function (resp) {
                        console.log(resp);
                        $('body').html(resp);
                    }
                })
            },
            update: function (status, parentOrderId) {
                let url = "/shop_api/changeStatus";
                console.log(parentOrderId);
                console.log(status);
                let params = {status: status, parentsOrderId: parentOrderId};
                doPost(url, params, function () {
                    console.log("改变状态成功！")
                })
            },
            comments: function (id) {
                let url = "/shop_api/comments";
                let a = $("#speak").val();
                if (a == null) {
                    alert("请输入评论内容哦");
                    return;
                }
                let parm = {id: id, comments: a};
                doPost(url, parm, function () {
                    alert("评论成功");
                })
            },
            showComment: function (e) {
                var that = e.target;
                alert($(that).attr("test"));
            }
        },
        mounted: function () {
            this.orderShow();
            this.getUser();
        }
    })
</script>
</html>

